<!-- stories/templates/stories/edit_story.html -->
{% extends 'stories/base.html' %}
{% load static %}

{% block title %}编辑故事 - {{ story.title }}{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>编辑故事</h1>
        <p>完善您的创作</p>
    </div>

    <div class="story-form-container">
        <form method="post" enctype="multipart/form-data" class="story-form">
            {% csrf_token %}

            <div class="form-group">
                <label for="id_title">故事标题 *</label>
                {{ form.title }}
                {% if form.title.errors %}
                    <div class="error-message">{{ form.title.errors }}</div>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="id_category">故事分类 *</label>
                {{ form.category }}
                {% if form.category.errors %}
                    <div class="error-message">{{ form.category.errors }}</div>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="id_cover_image">封面图片</label>
                {% if story.cover_image %}
                    <div class="current-cover">
                        <p>当前封面：</p>
                        <img src="{{ story.cover_image.url }}" alt="当前封面" style="max-width: 200px; height: auto; margin: 10px 0;">
                    </div>
                {% endif %}
                {{ form.cover_image }}
                <p class="help-text">上传新图片将替换当前封面，留空保持不变</p>
                {% if form.cover_image.errors %}
                    <div class="error-message">{{ form.cover_image.errors }}</div>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="id_content">故事内容 *</label>
                {{ form.content }}
                <div class="char-count">已输入 {{ story.content|length }} 个字符</div>
                {% if form.content.errors %}
                    <div class="error-message">{{ form.content.errors }}</div>
                {% endif %}
            </div>

            <div class="form-actions">
                <button type="submit" name="save_draft" class="btn btn-secondary">保存为草稿</button>
                <button type="submit" name="submit_for_review" class="btn btn-primary">提交审核</button>
                <a href="{% url 'stories:story_detail' story.id %}" class="btn btn-default">取消</a>
                <a href="{% url 'stories:my_stories' %}" class="btn btn-default">返回我的故事</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 字数统计
    $('#id_content').on('input', function() {
        var count = $(this).val().length;
        $('.char-count').text('已输入 ' + count + ' 个字符');
    });

    // 表单验证
    $('.story-form').submit(function(e) {
        var title = $('#id_title').val().trim();
        var content = $('#id_content').val().trim();
        
        if (!title) {
            alert('请输入故事标题');
            $('#id_title').focus();
            e.preventDefault();
            return false;
        }
        
        if (!content) {
            alert('请输入故事内容');
            $('#id_content').focus();
            e.preventDefault();
            return false;
        }
        
        if (content.length < 50) {
            if (!confirm('故事内容较短（少于50字），确定要保存吗？')) {
                e.preventDefault();
                return false;
            }
        }
    });
});
</script>
{% endblock %}